<template>
  <div class="vue-component-02">
    <MedoVRank3 :options="rankOptions"></MedoVRank3>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import MedoVRank3 from "@/components/vue-common/MedoVRank3.vue";

const data = reactive({
  rankOptions: {
    width: 450,
    height: 300,
    data: [
      {
        name: "青阳小学",
        value: 662,
        per: 100,
        unit: "万元",
      },
      {
        name: "青阳中学",
        value: 612,
        per: 90,
        unit: "万元",
      },
      {
        name: "职教中心",
        value: 554,
        per: 80,
        unit: "万元",
      },
      {
        name: "淮北中学",
        value: 325,
        per: 50,
        unit: "万元",
      },
      {
        name: "职教中心",
        value: 222,
        per: 35,
        unit: "万元",
      },
    ],
  },
});

const { rankOptions } = toRefs(data);
</script>

<style scoped lang="less">
.vue-component-02 {
  display: flex;
  justify-content: space-around;
  width: 500px;
  background-color: #061740;
  padding: 20px;
}
</style>
